<template>
	<view>
		<ShoproNav :isBack="true" :background="{background:'#F7F8FA'}">
			<text
				slot="content"
				style="color: #000; width: 100%; text-align: center;font-size: 34rpx"
			>
				{{ tabarTitle }}
			</text>
		</ShoproNav>
		<view class="content" :style="{'margin-top':indexItem==0?'118px':'10rpx','padding-bottom':indexItem==nameList.length-1?'120rpx':'0rpx'}" v-for="(nameItem,indexItem) in nameList">
			<text class="title">{{nameItem}}</text>
			<view class="items" v-for="(item,index) in data" :key="index" v-if="nameItem == item.moduleName">
				<checkbox-group @change="checkboxChange($event,index,item)">
					
					<label >
						<checkbox :value="item.id" :checked="item.isMark"  backgroundColor="#F7F8FA"	activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />
					</label>
				</checkbox-group>
				
				
				
				
				<view class="detail">
					<text class="name">{{item.resourceName}}</text>
					<!-- {{shijiancdu}} -->
					<view class="trainInfo">
						得分率 <text class="label">{{item.scoringrate}}</text> ，总使用次数 <text class="label">{{item.usenum}}</text> 次
					</view>
				</view>
				<image class="editor" src="@/static/editor.png" mode="aspectFit" @tap="openEditor(item.versionId,item.resourceName,item,index)">
				</image>
				<image v-if="item.usenum>0" class="arranged" src="@/static/arranged.png" mode="aspectFit"></image>
			</view>
			
			
			<!-- 	<view class="items" v-for="(item,index) in data" :key="index">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" :checked="isMark" backgroundColor="#F7F8FA" activeBackgroundColor="#2979ff"
							activeBorderColor="#" iconColor="#FFFFFF" />
					</label>
				</checkbox-group>
				<view class="detail">
					<text class="name">听选信息 M1A</text>
					<view class="trainInfo">
						得分率 <text class="label">61%</text> ，总使用次数 <text class="label">15</text> 次
					</view>
				</view>
				<image class="editor" src="@/static/editor.png" mode="aspectFit" @tap="openEditor"></image>
				<image v-if="true" class="arranged" src="@/static/arranged.png" mode="aspectFit"></image>
			</view> -->
		
		
		
		</view>
		<view v-if="xuanzhede.length!=0">
			<!--			<ProcessTime :time='shijiancdu' :number='jige' @handleEvent="handleClickModal" :isIos="isIos"-->
			<!--				@handleEvent2="handleClickNext" />-->
			<view class="footer" :class="isIos?'footerIos':''">
				<view class="footer-time" @tap="handleClickModal">
					<image class="footer-icon"
					       src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e519f234606e4b18937477cea78b8cd3_mergeImage.png"
					       mode="aspectFit">
					</image>
					
					<text class="footer-number">{{jige}}</text>
					<text class="footer-text">预计 <text class="footer-blue">{{shijiancdu}}</text> 分钟</text>
				</view>
				<view class="footer-next" @tap="handleClickNext">
					下一步
				</view>
			</view>
			
			<uni-popup class="popup" ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
				<view class="popup-top">
					<text class="popup-title">
						已选择内容
					</text>
					<text class="popup-close" @tap="handleClosePopup">
						取消
					</text>
				</view>
				<view class="popup-content">
					<view class="popup-items" v-for="(item,index) in xuanzhede" :key="index">
						<text class="popup-course">
							<!-- 课后单词表-Starter Module -->
							{{item.resourceName}}
						</text>
						<text class="popup-delete" @tap="handleDeleteItem(index)">
							删除
						</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import ProcessTime from '@/components/ProcessTime/index.vue';

import ShoproNav from '@/components/shopro-navbar/shopro-navbar.vue';

export default {
	components: {
		ProcessTime,
		ShoproNav
	},
	data() {
		return {
			// isMark: false,
			checkType:0,
			id: '',
			pid: '',
			name: '',
			data: [],
			page: 1,
			pageSize: 10,
			selectAllChange: [],
			jige: 0,
			shijiancdu: 0,
			xuanzhdeshuus: [],
			xuanzhede:[],
			xuanzhede_ti:[],
			shujusAll:[],
			isIos:false,
			tabarTitle:'',
			nameList:[]
		}
	},
	onLoad(option) {
		
		this.id = parseInt(option.id)
		this.pid = parseInt(option.typd)
		this.tabarTitle = option.title
		this.textbook()
		
	},
	onShow(){
		this.chongxinjisuan();
	},
	methods: {
		chongxinjisuan(){
			this.xuanzhede = uni.getStorageSync('xuanzhede') || []; ///从本地缓存中同步移除指定key的数据
			this.xuanzhede_ti = uni.getStorageSync('xuanzhede_ti') || [];
			console.log("===id",this.xuanzhede_ti)
			if(this.xuanzhede_ti&&this.xuanzhede_ti.length>0){
				this.xuanzhede_ti.forEach((item,indecs)=>{
					if(this.xuanzhede.length==0){
						this.data.forEach((keitemss)=>{
							if(item.id == keitemss.kechengId){
								this.xuanzhede.push(keitemss)
							}
						})
					}
				})
			}
			uni.setStorageSync("xuanzhede",this.xuanzhede)
			this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
			this.jige=this.xuanzhede.length
			if(this.xuanzhede.length==0){
				this.xuanzhede_ti.forEach(item=> {
					this.data.map((items, index) => {
						//console.log("===item.productId == items.productId", item.productId == items.productId)
						if (items.id == item.kechengId) {
							item.isMark = true;
							this.xuanzhede.push(items)
							
						}
					})
				})
				//console.log("222items",this.xuanzhede)
			}else{
				this.xuanzhede.forEach(item=>{
					this.data.map((items,index)=>{
						//console.log("===item.productId == items.productId",item.productId == items.productId)
						if(item.id == items.id){
							item.isMark = true;
							this.data.splice(index, 1, item)
							//console.log("111items",this.xuanzhede)
						}
					})
				})
			}
			const systemInfo = uni.getSystemInfoSync()
			if (systemInfo.osName === 'ios') {
				this.isIos = true
			}  //苹果
			if (systemInfo.osName === 'android') {
				this.isIos = false
			}  //安卓
		},
		/**,
		 * 计算给定字段的总计
		 * @param {Array} array 对象数组数据
		 * @param {String} computedField  需要进行合计的字段名
		 * @return {Number} 合计后的结果
		 */
		totalSum(array, computedField) {
			if (!array || array.length === 0) {
				return 0
			} else {
				return array.reduce((value, item) => value + +item[computedField], 0)
			}
		},
		/**
		 * 计算给定字段的总计结束**/
		handleDeleteItem(e) {
			
			let delItem = this.xuanzhede[e]
			this.xuanzhede.splice(e,1)
			this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
			this.jige = this.xuanzhede.length
			// //console.log()
			this.data.forEach(item=>{
				
				if(item.id==delItem.id) item.isMark = false
			})
			uni.setStorageSync('xuanzhede', this.xuanzhede);
			
			
			
		},
		
		textbook() {
			var that = this
			
			var data = {
				id: that.id,
				pid: that.pid,
				page: that.page,
				pageSize: that.pageSize,
			}
			let url = "";
			if(this.tabarTitle == '教材同步'){
				url = "textbook/unitword";
			}
			that.$post(url, data).then(res => {
				if (res.code != 0) {
					uni.setNavigationBarTitle({
						title: res.data.name,
					});
					that.name = res.data
					// 后台返回的数组
					//console.log(res.data,'教程章节详情hearsay/chapterdetail')
					let dataArr = [];
					if(this.tabarTitle == '教材同步'){
						dataArr = res.data;
					}
					dataArr.forEach((item, index) => {
						if(this.nameList.indexOf(item.moduleName)==-1){
							this.nameList.push(item.moduleName)
						}
						// if(item.key) return
						Object.assign(item, {
							isMark: false,
							checkType:0,
							id:item.id.toString()
						})
						this.xuanzhede.forEach((items) => {
							if(item.id==items.id) {
								Object.assign(item, {
									checkType:items.checkType,
									isMark: true
								})
							}
						})
					})
					
					that.data = dataArr
					//console.log("===this.xuanzhede",this.xuanzhede)
					that.dataCopy = JSON.parse(JSON.stringify(that.data))
					this.xuanzhede.forEach(item=>{
						this.data.map((items,index)=>{
							//console.log("===item.productId == items.productId",item.productId == items.productId)
							if(item.id == items.id){
								item.isMark = true;
								this.data.splice(index, 1, item)
							}
						})
					})
					that.data.forEach((item,index)=>{
						that.xiugai(item.versionId)
					})
					that.chongxinjisuan();
				} else {
					
					
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
				
				
			})
		},
		
		checkboxChange(e,index,items) {
			console.log("===e",e,index,items)
			// this.data[index].tnum = this.dataCopy[index].tnum;
			// this.data[index].minute = this.dataCopy[index].minute;
			var invoice = this.data[index]; //变量 invoice == 数组每一项索引
			let delItem = this.xuanzhede
			let sig={
				'pid':this.pid,
				'tid':items.versionId,
				"kechengId":items.id
			}
			if (invoice!=null) {
				if(!invoice.isMark){
					invoice.isMark = true;
				}else{
					invoice.isMark = false
				}
				this.data.splice(index,1,invoice);
				let jjs=delItem.findIndex(item => item.id == invoice.id);
				if(jjs=='-1'){
					delItem.push(invoice);
					this.xiugai(items.versionId);
					let checkedList = [];
					this.shujus.forEach((item, index) => {
						// let itemVal = item.wId;
						let itemVal = String(index);
						checkedList.push(itemVal);
					})
					sig.ti=checkedList;
					// 检查数组中是否已存在具有相同 pid 的对象
					let existingItem = this.xuanzhede_ti.find(items => items.kechengId == sig.kechengId);
					if(existingItem){
						this.xuanzhede_ti.map((items)=>{
							if(sig.kechengId == items.kechengId){
								items.ti = checkedList
							}
						})
					}else{
						this.xuanzhede_ti.push(sig)
					}
				}else{
					delItem.forEach((item,index)=>{
						if(item.id==invoice.id){
							item.isMark = false
							this.xuanzhede.splice(jjs,1)
							let existingItem = this.xuanzhede_ti.findIndex(items => items.kechengId == sig.kechengId);
							this.xuanzhede_ti.splice(existingItem,1);
							this.xuanzhede.splice(index,1);
						}
						//
					})
					this.xiugai(items.versionId)
				}
				uni.setStorageSync("xuanzhede_ti",this.xuanzhede_ti);
				uni.setStorageSync("xuanzhede", this.xuanzhede);
				this.chongxinjisuan();
			}
		},
		xiugai(id) {
			var that = this
			var data = {
				id: id,
				page: that.page,
				pageSize: that.pageSize,
			}
			let url = "";
			if(this.tabarTitle == '教材同步'){
				url = "textbook/wordinfo";
			}
			that.$post(url, data).then(res => {
				if (res.code != 0) {
					
					that.shujus = res.data.resource
					that.shujusAll.push(that.shujus)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		
		
		openEditor(id,title,keitem,keindex) {
			
			this.data.forEach(item=>{
				// //console.log(item.id)
				if(item.versionId==id){
					//console.log(this.data,item.isMark)
					if(item.isMark==true){
						var data={
							isAllChecked:true
						}
						//console.log(keitem.tnum ,this.dataCopy[keindex],this.dataCopy[keindex].tnum,"===this.jige == this.dataCopy.length",keitem.tnum  ==this.dataCopy[keindex].tnum)
						if(keitem.tnum == this.dataCopy[keindex].tnum){
							data.isAllChecked=true
						}else{
							data.isAllChecked=false
						}
						//console.log(11)
						
						uni.navigateTo({
							url: `/pages/thirCatalogue/index?id=${id}&isAllChecked=${data.isAllChecked}&shuji_id=${this.id}&pid=${this.pid}&title=${title}&versionId=${item.versionId}&bartTitle=${this.tabarTitle}&kechengId=${item.id}`,
						});
					}else{
						var data={
							isAllChecked:false
						}
						//console.log(22)
						uni.navigateTo({
							url: `/pages/thirCatalogue/index?id=${id}&isAllChecked=${data.isAllChecked}&shuji_id=${this.id}&pid=${this.pid}&title=${title}&title=${title}&versionId=${item.versionId}&bartTitle=${this.tabarTitle}&kechengId=${item.id}`,
						});
					}
				}
			})
			
		},
		/** 数组去重
		 * 思路：利用数组原型对象上的 filter 和 includes 方法
		 * @param arr 需要去重的数组
		 * @param t 根据 t 字段(指定)进行去重
		 * @returns {*[]} 已去重后的数据
		 */
		deduplicate(arr, t = "") {
			let newArr = []
			// 有指定字段
			if (t) {
				newArr = arr.filter(function (item) {
					return newArr.includes(item[t]) ? "" : newArr.push(item[t])
				})
			}
			// 无指定字段
			else {
				newArr = arr.filter(function (item) {
					return newArr.includes(item) ? "" : newArr.push(item)
				})
			}
			return newArr
		},
		/** 数组去重结束**/
		handleClickNext(e) {
			uni.navigateTo({
				url: `/pages/submitWork/index?type=${this.tabarTitle}`,
			});
		},
		handleClickModal(e) {
			this.$refs.popup.open('bottom');
			// uni.navigateTo({
			// 	url: `/pages/submitWork/index`,
			// });
		},
		handleClosePopup() {
			this.$refs.popup.close();
		},
	}
}
</script>

<style scoped>










.check-not-full {
	border-color: #007aff;
	background-color: #007aff;
	.uni-checkbox-input {
		position: absolute;
		/* #ifdef APP-NVUE */
		top: 2px;
		/* #endif */
		/* #ifndef APP-NVUE */
		top: 1px;
		/* #endif */
		left: 3px;
		height: 6px;
		width: 9px;
		border-bottom-width: 1px;
		border-bottom-color: #e7e7e7;
		border-bottom-style: solid;
		transform-origin: center;
	}
	
}
.popup-title {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 42rpx;
}

.popup-top {
	width: 100%;
	height: 98rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	box-sizing: border-box;
	background-color: rgba(248, 248, 248, 1);
	border-radius: 16rpx 16rpx 0px 0px;
}

.popup-close {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 26rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 36rpx;
}

.popup-content {
	width: 100%;
	min-height: 384rpx;
	padding: 40rpx 32rpx 168rpx 40rpx;
	box-sizing: border-box;
	margin-bottom: 128rpx;
}

.popup-items {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.popup-course {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 42rpx;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.popup-delete {
	overflow-wrap: break-word;
	color: rgba(41, 121, 255, 1);
	font-size: 26rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 36rpx;
}

/* 弹窗结束 */



.content {
	height: 100%;
	padding: 0 32rpx;
}

.title {
	display: block;
	margin: 30rpx 0 20rpx 16rpx;
}

.items {
	width: 686rpx;
	height: 184rpx;
	border-radius: 24rpx;
	background-color: rgba(41, 121, 255, 0.05);
	padding: 45rpx 26rpx;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24rpx;
	position: relative;
}

.detail {
	height: 120%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 30rpx;
	width: 78%;
}

.name {
	overflow-wrap: break-word;
	color: rgba(34, 34, 34, 1);
	font-size: 28rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 40rpx;
}

.trainInfo {
	overflow-wrap: break-word;
	color: rgba(114, 122, 142, 1);
	font-size: 26rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 36rpx;
}

.label {
	color: rgba(41, 121, 255, 1);
	margin: 0 10rpx;
}

.editor {
	width: 48rpx;
	height: 48rpx;
}

.arranged {
	width: 82rpx;
	height: 80rpx;
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
}
.name{
	text-overflow: ellipsis;
	width: 100%;
	overflow: hidden;
}


.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: calc(100vw - 52rpx);
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:26rpx 32rpx;
}
.footerIos{
	padding: 30rpx 32rpx 0;
}

.footer-time {
	position: relative;
	display: flex;
	align-items: center;
}

.footer-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 16rpx;
}

.footer-number {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 32rpx;
	top: -20rpx;
	width: 32rpx;
	height: 32rpx;
	color: #FFFFFF;
	font-size: 20rpx;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 1);
	box-shadow: 0 1px 8rpx 0 rgba(255, 0, 48, 0.2);
	background-color: rgba(244, 51, 60, 1);
}

.footer-text {
	color: rgba(51, 51, 51, 1);
	font-size: 28rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 40rpx;
}

.footer-blue {
	color: rgba(41, 121, 255, 1);
	font-size: 28rpx;
	font-family: PingFangSC-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 40rpx;
	margin: 0 10rpx;
}

.footer-next {
	width: 240rpx;
	height: 88rpx;
	border-radius: 45rpx;
	border: 1px solid rgba(41, 121, 255, 1);
	color: rgba(41, 121, 255, 1);
	font-size: 30rpx;
	font-family: PingFangSC-Medium;
	font-weight: bold;
	text-align: center;
	line-height: 86rpx;
}
</style>